<template>
  <div>
    <el-steps :active="active" :finish-status="status">
      <el-step :title="$t('column.basic')" icon="el-icon-edit">>
      </el-step>
      <el-step :title="$t('column.designer')" icon="el-icon-hot-water"></el-step>
      <el-step :title="$t('column.setting')" icon="el-icon-setting"></el-step>
    </el-steps>
    <div class="container">
      <el-form
        v-if="[0, 4].includes(active) && isFormShow"
        ref="form"
        :model="formData"
        :rules="handleFormRulesMode()"
        :fullscreen="formOptions.fullscreen"
        :formMode="formMode"
        @submit.native.prevent
        v-bind="formOptions"
      >
        <el-row v-bind="formOptions">
          <template v-for="(item,key, index) in formTemplateStorage">
            <el-col :key="index"
                    v-if="getTemplateComponentAttr(item,'show', true,getContext(key))"
                    :span="getTemplateComponentAttr(item,'span', 24)"
                    :offset="getTemplateComponentAttr(item,'offset', 0)"
            >
              <d2-form-item
                :template="item"
                :colKey="key"
                :formData="formData"
                :ref="'form_item_'+key"
                :formMode="formMode"
                :getColumn="getFormComponentRef"
                @form-data-change="handleFormDataChange"
                @form-component-ready="handleFormComponentReady"
                @form-component-custom-event="handleFormComponentCustomEvent"
              >
                <template :slot="key+'FormSlot'">
                  <slot :name="key+'FormSlot'" :form="formData" :mode="formMode" :row="formDataStorage"/>
                </template>
                <template :slot="key+'HelperSlot'">
                  <slot :name="key+'HelperSlot'" :form="formData" :mode="formMode" :row="formDataStorage"/>
                </template>
              </d2-form-item>
            </el-col>
          </template>
        </el-row>

        <el-collapse v-if="formTemplateGroupStorage" v-model="formGroupsActive"
                     :accordion="formTemplateGroupStorage.accordion">
          <template v-for="(group,groupKey) in formTemplateGroupStorage.groups">
            <el-collapse-item :key="groupKey" :name="groupKey" :disabled="group.disabled"
                              v-if="getAttribute(group,'show', true,{mode:formMode,form:formData})">
              <template slot="title">
                <h3 v-if="!$scopedSlots[groupKey+'GroupTitleSlot']" class="group-title"><i v-if="group.icon"
                                                                                           class="header-icon"
                                                                                           :class="group.icon"/>
                  {{ group.title }}</h3>
                <slot :name="groupKey+'GroupTitleSlot'" :groupKey="groupKey" :group="group"/>
              </template>
              <el-row v-bind="formOptions">
                <template v-for="(item,key, index) in group.columns">
                  <el-col :key="index"
                          v-if="getTemplateComponentAttr(item,'show', true,getContext(key))"
                          :span="getTemplateComponentAttr(item,'span', 24)"
                          :offset="getTemplateComponentAttr(item,'offset', 0)"
                  >
                    <d2-form-item
                      :template="item"
                      :colKey="key"
                      :formData="formData"
                      :ref="'form_item_'+key"
                      :formMode="formMode"
                      :getColumn="getFormComponentRef"
                    >
                      <template :slot="key+'FormSlot'">
                        <slot :name="key+'FormSlot'" :form="formData" :row="formDataStorage"/>
                      </template>
                      <template :slot="key+'HelperSlot'">
                        <slot :name="key+'HelperSlot'" :form="formData" :row="formDataStorage"/>
                      </template>
                    </d2-form-item>
                  </el-col>
                </template>
              </el-row>
            </el-collapse-item>
          </template>
        </el-collapse>
      </el-form>
      <v-form-designer ref="form_designer" v-if="active===1" v-model="formData.form_design" @input="buildColumns"/>
      <setting ref="setting" v-show="active===2" :column-map.sync="columnMap"/>
    </div>

  </div>
</template>

<script>

import {mapState} from "vuex";
import D2FormItem from '@/components/d2-curd/components/d2-form-item'
import VFormDesigner from "@/components/v-form-design/form-designer";
import lodash from "lodash";
import JSONPath from "jsonpath";
import {utils} from "@/util/utils";
import Setting from "@/views/system/menu/components/settings";
import {ColumnRestoreMap, DefaultColumnMap} from "@/config/column";

export default {
  name: "menu-designer",
  props: {
    formDataStorage: {
      type: Object
    },
    isFormShow: Boolean,
    handleFormRulesMode: {
      type: Function
    },
    formOptions: {
      type: Object
    },
    formData: {
      type: Object
    },
    formMode: String,
    formTemplateStorage: {
      type: Object
    },
    getTemplateComponentAttr: {
      type: Function
    },
    formTemplateGroupStorage: {
      type: Object
    },
    formGroupsActive: {
      type: Array
    },
    getContext: {
      type: Function
    },
    handleFormComponentReady: Function,
    handleFormDataChange: Function,

    handleFormComponentCustomEvent: Function
  },
  mixins: [
    // dialog,
    // utils,
  ],
  components: {
    Setting,
    VFormDesigner,
    D2FormItem,
  },
  computed: {
    ...mapState('superstore/menudesigner', [
      'active', 'status'
    ])
  },

  data () {
    if (!lodash.isEmpty(this.formData.column_map))
      return {columnMap: this.formData.column_map}
    return {
      columnMap: {
        ..._.cloneDeep(DefaultColumnMap),
        columns:
          []
      }
    }
  },
  created() {
  },
  // beforeDestroy() {
  //   console.log(this.$refs.form)
  //   this.$refs.form.resetFields();
  // },

  methods: {
    getFormComponentRef(key) {
      if (this.$refs) {
        const wrapper = this.$refs['form_item_' + key]
        if (wrapper && wrapper.length > 0 && wrapper[0]) {
          return wrapper[0].getComponentRef()
        }
      }
    },
    buildColumnKey(item, index) {
      return (item.key || '') + (item.uniqueKey || '') + index // + new Date().getTime()
    },
    buildColumns(changeValues, values) {
      if (values.hasOwnProperty('widgetList')) {
        const columns = utils.buildColumns(changeValues, '', this.columnMap.columns)

        columns.forEach(col => {
          const old_col = this.columnMap.columns.find((oc) => oc.key === col.key)
          if(old_col){
            ColumnRestoreMap.forEach((selector) => {
              JSONPath.value(col, selector, JSONPath.query(old_col, selector)[0])
            })
            Object.assign(col, {title: col.title, })
          }
        })
        this.columnMap['columns'] =  columns
      }
    }
  }
}
</script>

<style scoped>
.container {
  padding: 24px 0;
}
</style>
